<template>
  <div>
    <el-form :inline="true" class="demo-form-inline" :model="cForm">
      <el-form-item label="一级分类">
        <!-- 一级分类下拉框改变触发handler1事件回调，获取二级分类数据(需要携带一级分类id) -->
        <el-select v-model="cForm.category1Id" placeholder="请选择" :disabled="show" @change="handler1(cForm.category1Id)">
          <!-- 遍历获取的一级分类数据并展示 -->
          <el-option v-for="c1 in level1CategoryList" :key="c1.id" :label="c1.name" :value="c1.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类">
        <el-select v-model="cForm.category2Id" placeholder="请选择" :disabled="show" @change="handler2(cForm.category2Id)">
          <el-option v-for="c2 in level2CategoryList" :key="c2.id" :label="c2.name" :value="c2.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类">
        <el-select v-model="cForm.category3Id" placeholder="请选择" :disabled="show" @change="handler3(cForm)">
          <el-option v-for="c3 in level3CategoryList" :key="c3.id" :label="c3.name" :value="c3.id" />
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'Level3Linkage',
  // 接受父组件传递过来的属性，控制三级表单的禁用状态
  props: {
    show: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      // 一级分类数据
      level1CategoryList: [],
      // 二级分类数据
      level2CategoryList: [],
      // 三级分类数据
      level3CategoryList: [],
      // 收集表单id数据
      cForm: {
        // 改变一级分类表单数据获得的一级分类id
        category1Id: '',
        // 改变二级分类表单数据获得的二级分类id
        category2Id: '',
        // 改变二级分类表单数据获得的二级分类id
        category3Id: ''
      }
    }
  },
  mounted() {
    // 页面一展示就获取一级分类的数据
    this.getLevel1CategoryList()
  },
  methods: {
    // 获取一级分类数据
    async getLevel1CategoryList() {
      const result = await this.$API.attr.reqLevel1CategoryList()
      if (result.code === 200) {
        this.level1CategoryList = result.data
      }
    },
    // 一级分类的select事件回调(当一级分类的option发生变化的时候获取相应二级分类的数据)
    async handler1(id) {
      // 获取新的一级分类数据，清除二三级分类数据
      this.level2CategoryList = []
      this.level3CategoryList = []
      this.cForm.category2Id = ''
      this.cForm.category3Id = ''
      const result = await this.$API.attr.reqLevel2CategoryList(id)
      if (result.code === 200) {
        this.level2CategoryList = result.data
      }
    },
    // 二级分类的select事件回调(当二级分类的option发生变化的时候获取相应三级分类的数据)
    async handler2(id) {
      // 获取新的二级分类数据，清除三级分类数据
      this.level3CategoryList = []
      this.cForm.category3Id = ''
      const result = await this.$API.attr.reqLevel3CategoryList(id)
      if (result.code === 200) {
        this.level3CategoryList = result.data
      }
    },
    // 获取下面card属性页的数据
    handler3(cForm) {
      this.$emit('getCategoryId', cForm)
    }
  }

}
</script>

<style>

</style>
